<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import type { NavbarRectInfo } from '@tuniao/tnui-vue3-uniapp/components/navbar'
import PageContainer from '@/components/page-container/index.vue'
import system from '@/api/system.js'
import { FILE_URL } from '@/api/config.js'

const navbarHeight = ref(0)
// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height
}

const state = reactive({
  id: 0,
  detail: {},
})

const getRicktextDetail = () => {
  system
    .ricktext({
      id: state.id,
    })
    .then((res) => {
      if (res.code == 1) {
        state.detail = res.data
      }
    })
    .catch((err) => {
      console.log(err)
    })
}

onLoad((options) => {
  if (!options?.id) {
    uni.showModal({
      title: '提示',
      content: '参数错误',
      showCancel: false,
      success: () => {
        uni.navigateBack()
      },
    })
    return
  }
  state.id = options.id
  getRicktextDetail()
})
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      fixed
      bg-color="transparent"
      :bottom-shadow="false"
      :placeholder="false"
      @init-finish="navbarInitFinishHandle"
    />
    <view class="detail-page" :style="{ paddingTop: `${navbarHeight + 10}px` }">
      <!-- 内容 -->
      <view class="content">
        <view class="title">
          {{ state.detail?.title }}
        </view>
        <view class="content">
          <mp-html :content="state.detail?.content" />
        </view>
      </view>
    </view>
  </PageContainer>
</template>

<style lang="scss" scoped>
.detail-page {
  position: relative;
  width: 100%;
  /* 内容 start */
  .content {
    padding: 0rpx 20rpx;

    .title {
      font-size: 36rpx;
      font-weight: bold;
      text-align: center;
    }

    .content {
      margin: 30rpx 0;
    }
  }
  /* 内容 end */
}
</style>
